<!--汇创业服务-->
<template>
  <div class="serviceContainer">
    <bannerHeader :options="options" class="mar50"> </bannerHeader>
    <!-- 导航 -->
    <nav class="f">
      <p class="title f fb">
        <span class="name">汇创营</span>
        <span class="bod"></span>
      </p>
      <ul class="nav_ul f fl">
        <li
          class="nav_li"
          v-for="(item, index) in navli"
          :key="index"
          :class="{ navAct: navIndex == index }"
          @click="toNav(index)"
        >
          {{ item.title }}
        </li>
      </ul>
    </nav>
    <!-- 内容 -->
    <ul class="cont_ul f">
      <li
        class="cont_li productShow"
        v-for="(item, index) in 5"
        :key="index"
        @click="openService"
      >
        <el-image
          lazy
          style="width: 100%; height: 100%"
          src="../../static/images/bbi/zz6.jpg"
          fit="cover"
          class="deimg"
        ></el-image>
        <div class="descDiv oneLine">开户许可证变更</div>
        <!--hover效果-->
        <div class="hoverDiv">
          <div class="flexCenter w100 h100 overHidden">
            <div class="w100 m100">
              <p class="title1 oneLine">跨区迁址</p>
              <p class="desc moreLine">
                描述服务的文案，最多支持100字。描述服务的文案，最多支持100字。描述服务的文案，最多支持100字。描述服务的文案，最多支持100字。描述服务的文案，最多支持100字。描述服务的文案，最多支持100字。
              </p>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <!-- 合作服务商 -->
    <div class="service f fb">
      <div class="left">
        <p class="title">合作服务商</p>
        <p class="desc">我们精心挑选优质服务商为你提供服务</p>
      </div>
      <swiper :options="swiperOption" ref="mySwiper" class="service_ul">
        <swiper-slide
          class="service_li"
          v-for="(item, index) in 5"
          :key="index"
        >
          <div class="top">
            <el-image
              lazy
              class="logo"
              src="../../static/images/bbi/zz8.jpg"
              fit="contain"
            ></el-image>
          </div>
          <div class="bot">
            <p class="title oneLine">创头条</p>
            <p class="desc oneLine">法律顾问、法律事务</p>
          </div>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </div>
    <!-- 服务内容弹框 -->
    <div class="serviceContent" v-show="servicePopup">
      <div class="zhezhao"></div>
      <div class="cont">
        <div class="content">
          <el-image
            src="../../static/images/bbi/head1.jpg"
            fit="cover"
            class="close"
            @click="closeSerivce"
          ></el-image>
          <div class="head f vfe">
            <p class="photo f fc">
              <el-image
                src="../../static/images/bbi/ser2.jpg"
                fit="cover"
                class="photoimg"
              ></el-image>
            </p>
            <p class="name">北京群益律师事务所</p>
          </div>
          <!-- 服务商简介 -->
          <div class="commonTitle f">
            <el-image
              src="../../static/images/bbi/park2.jpg"
              fit="cover"
              class="icon"
            ></el-image>
            <span>服务商简介</span>
          </div>
          <div class="desc">
            北京群益律师事务所成立于2013年，是由长期从事法律、管理、经济业务的资深人士发起，由北京市司法局批准设立的公司化运作的大型综合律师服务机构，向广大客户提供集成化、专业化、细节化的高效法律服务。
            群益强调团队精神、集体智慧，在为客户解决重大、复杂、疑难案件方面具有深厚的实力和丰富的经验；重视培养人才资源，储备了一支具有管理、科技、金融、贸易、语言和中外法律多重专业学历背景的律师团队。
          </div>
          <!-- 服务范围 -->
          <div class="commonTitle f">
            <el-image
              src="../../static/images/bbi/ser1.jpg"
              fit="cover"
              class="icon"
            ></el-image>
            <span>服务范围</span>
          </div>
          <div class="desc">法律顾问、法律事务</div>
          <!-- 服务区域 -->
          <div class="commonTitle f">
            <el-image
              src="../../static/images/bbi/ser3.jpg"
              fit="cover"
              class="icon"
            ></el-image>
            <span>服务区域</span>
          </div>
          <div class="desc">法律顾问、法律事务</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import bannerHeader from '../components/banner'
export default {
  components: {
    bannerHeader,
    swiper,
    swiperSlide
  },
  data () {
    return {
      options: {
        title: '服务',
        intro:
          '人工智能全链条孵化体系和硬科技孵化服务平台，建立服务流程与标准，创建战略新兴产业源头企业 专业化服务模式',
        banner: require('../../static/images/bbi/banner1.jpg')
      },
      swiperOption: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        slidesPerView: 'auto'
      },
      // 导航
      navIndex: 0,
      navli: [
        { id: 0, title: '工商代理' },
        { id: 1, title: '记账与报税' },
        { id: 2, title: '政策咨询' },
        { id: 3, title: '法务' },
        { id: 4, title: '人力资源' },
        { id: 5, title: '资金申请' },
        { id: 6, title: '投融资' },
        { id: 7, title: '知识产权服务' },
        { id: 8, title: '企业体系认证' }
      ],
      servicePopup: false
    }
  },
  methods: {
    toNav (index) {
      this.navIndex = index
    },
    openService () {
      this.servicePopup = true
    },
    closeSerivce () {
      this.servicePopup = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../assets/css/main.scss";
@import "../assets/css/common.scss";
</style>
